<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类参数</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-alert
        title="注意：仅允许为第三级分类设置参数"
        show-icon
        :closable="false"
        type="warning"
      >
      </el-alert>
      <!-- 商品分类 级联列表 -->
      <div class="goodsCateList">
        <span>商品分类列表：</span>
        <span>
          <el-cascader
            v-model="selectedCascader"
            :options="goodsCateList"
            :props="casterprops"
            @change="parentCateChanged"
            :clearable="true"
          ></el-cascader
        ></span>
      </div>
      <!-- 标签页 -->
      <el-tabs
        v-model="activeName"
        type="border-card"
        @tab-click="tabsHandleClick"
      >
        <el-tab-pane label="动态参数" name="many">
          <el-button type="primary" :disabled="isBtnDisabled" @click="addParams"
            >添加参数</el-button
          >
          <el-table :data="manyTableData" style="width: 100%" border>
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-tag
                  :key="index"
                  v-for="(tag, index) in scope.row.attr_vals"
                  closable
                  :disable-transitions="false"
                  @close="handleTagClose(scope.row, index)"
                >
                  {{ tag }}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="scope.row.tagInputVisible"
                  v-model="scope.row.tagInputValue"
                  ref="saveTagInput"
                  size="mini"
                  @keyup.enter.native="handleInputConfirm(scope.row)"
                  @blur="handleInputConfirm(scope.row)"
                >
                </el-input>
                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInput(scope.row)"
                  >+ New Tag</el-button
                >
              </template>
            </el-table-column>

            <el-table-column type="index" label="#"> </el-table-column>
            <el-table-column prop="attr_name" label="参数名称">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="editParams(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  @click="deleteParams(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="静态属性" name="only">
          <el-button type="primary" :disabled="isBtnDisabled" @click="addParams"
            >添加属性</el-button
          >
          <el-table :data="onlyTableData" style="width: 100%" border>
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-tag
                  :key="index"
                  v-for="(tag, index) in scope.row.attr_vals"
                  closable
                  :disable-transitions="false"
                  @close="handleTagClose(scope.row, index)"
                >
                  {{ tag }}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="scope.row.tagInputVisible"
                  v-model="scope.row.tagInputValue"
                  ref="saveTagInput"
                  size="mini"
                  @keyup.enter.native="handleInputConfirm(scope.row)"
                  @blur="handleInputConfirm(scope.row)"
                >
                </el-input>
                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInput(scope.row)"
                  >+ New Tag</el-button
                >
              </template>
            </el-table-column>

            <el-table-column type="index" label="#"> </el-table-column>
            <el-table-column prop="attr_name" label="属性名称">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="editParams(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  @click="deleteParams(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 添加参数属性对话框 -->
    <el-dialog
      :title="'添加' + titleText"
      :visible.sync="addParamsDialogVisable"
    >
      <el-form
        ref="addParamsForm"
        :rules="addParamsRules"
        :model="addParamsForm"
        label-width="80px"
      >
        <el-form-item :label="titleText" prop="addParamsInputData">
          <el-input v-model="addParamsForm.addParamsInputData"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addParamsDialogCancel">取 消</el-button>
        <el-button type="primary" @click="addParamsDialogConfirm"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 修改参数属性对话框 -->
    <el-dialog
      :title="'修改' + titleText"
      :visible.sync="editParamsDialogVisable"
    >
      <el-form
        ref="editParamsForm"
        :rules="editParamsRules"
        :model="editParamsForm"
        label-width="80px"
      >
        <el-form-item :label="titleText" prop="editParamsInputData">
          <el-input v-model="editParamsForm.editParamsInputData"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="editParamsDialogCancel">取 消</el-button>
        <el-button type="primary" @click="editParamsDialogConfirm"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 删除参数或者属性对话框 -->
    <el-dialog title="" :visible.sync="deleteDialogVisible">
      <div>确认删除 {{ curAttrName }} {{ titleText }}</div>
      <div slot="footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteDialogConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {judgeMessage} from '../../api/utils'
export default {
    data(){
        return{
            // 级联选择框
            selectedCascader:[],//级联选择框选中的元素
            goodsCateList:[],//级联选择框展示的数据
            casterprops:{
                label:'cat_name',
                value:'cat_id',
                children:'children'
            },
            // 标签页
            activeName:'many',
            isDisabled:true,
    
            // 动态参数数据
            manyTableData:[],
            // 静态属性数据
            onlyTableData:[],
            // 添加动态参数对话框显示与隐藏
            addParamsDialogVisable:false,
            // 添加参数和属性输入框的数据
            addParamsForm:{
                 addParamsInputData:''
            },
            // 添加参数属性 输入框 规则
            addParamsRules:{
                addParamsInputData:[
                    { required: true, message: '请输入3-5个字符', trigger: 'blur' },
                ]
            },
            // 修改参数属性输入框 显示与隐藏
            editParamsDialogVisable:false,
             editParamsForm:{
                 editParamsInputData:''
            },
            editParamsRules:{
                editParamsInputData:[
                    { required: true, message: '请输入3-5个字符', trigger: 'blur' },
                ]
            },
            curArrID:0,//编辑或者删除时选中行的数据arr_id
            curAttrName:'',
            // 删除对话框 
            deleteDialogVisible:false,


        }
    },
    created(){
        this.getGoodsCateList()
    },

    computed:{
        isBtnDisabled(){
            if(this.selectedCascader.length!==3){
               return true
            }else{
                return false
            }
        },

        cateId(){
            if(this.selectedCascader.length ===3){
                return this.selectedCascader[2]
            }
            return null
        },
        titleText(){
            if(this.activeName==='many'){
                return '动态参数'
            }else{
                return '静态属性'
            }
            
        },
    },

    methods: {
        // 得到级联选择器中的数据
        async getGoodsCateList(){
          const {data:res} = await this.$http.get('categories',{'type':3})
          if(res.meta.status!==200){
              return this.$message.error('获取商品分类信息错误')
          }
           this.goodsCateList=res.data
        },
        // 级联选择框选中之后的操作
        parentCateChanged(){
            this.getParamsData()
        },
        // 级联选择框和标签页切换之后获取新的数据
        async getParamsData(){
            if(this.selectedCascader.length!==3){
                this.selectedCascader=[]
                this.onlyTableData=[]
                this.manyTableData=[]
                return
            }
            const {data:res} = await this.$http.get('categories/'+this.cateId+'/attributes',{params:{sel:this.activeName}})
            const resmsg =   judgeMessage(res.meta.status,200,'获取动态参数或者属性')
            if(resmsg==='err') return 

            res.data.forEach(item => {
                item.attr_vals = item.attr_vals ? item.attr_vals.split(',') :[]
                item.tagInputVisible = false
                item.tagInputValue = ''
            });

            if(this.activeName==='only'){
                this.onlyTableData = res.data
            }else if(this.activeName==='many'){
                this.manyTableData = res.data
            }
        },
        // 标签页
        tabsHandleClick(){
            this.getParamsData()
        },
        // 添加动态参数
        addParams(){
            this.addParamsDialogVisable=true
        },
        // 添加参数或者属性对话框 取消按钮事件
        addParamsDialogCancel(){
            this.$refs.addParamsForm.resetFields()
            this.addParamsForm.addParamsInputData=''
            this.addParamsDialogVisable=false
        },
        // 添加参数或者属性对话框 确认按钮事件
        async addParamsDialogConfirm(){
            if(this.selectedCascader.length!==3){
                return this.$message.error('级联选择框没有选中第三级')
            }
            let c_id = this.selectedCascader[2]
            const {data:res} = await this.$http.post('categories/'+c_id+'/attributes',{
                'attr_name':this.addParamsForm.addParamsInputData,
                'attr_sel':this.activeName,
                })
            let resmsg = judgeMessage(res.meta.status,201,'添加参数或者属性')
            if(resmsg==='err'){return}
            this.getParamsData()
            this.addParamsDialogCancel()

        },

        // 修改参数和属性 
         editParams(row){
             this.curArrID= row.attr_id
            this.editParamsForm.editParamsInputData = row.attr_name
            this.editParamsDialogVisable=true
        },
        editParamsDialogCancel(){
            this.editParamsForm.editParamsInputData=''
            this.$refs.editParamsForm.resetFields()
            this.editParamsDialogVisable=false

        },
       async editParamsDialogConfirm(){
          const {data:res} = await this.$http.put('categories/'+this.cateId+'/attributes/'+this.curArrID,{     
                'attr_name':this.editParamsForm.editParamsInputData,
                'attr_sel':this.activeName,
                ' attr_vals':''
          })
          let resmsg = judgeMessage(res.meta.status,200,'编辑参数或者属性')
          if(resmsg==='err')return
          this.getParamsData()
          this.editParamsDialogCancel()     
        },
        // 删除修改参数
        deleteParams(row){
            this.curAttrName=row.attr_name
            this.curArrID = row.attr_id
            this.deleteDialogVisible=true
        },
       async deleteDialogConfirm(){
         const {data:res}=  await this.$http.delete('categories/'+this.cateId+'/attributes/'+this.curArrID)
         const resmsg= judgeMessage(res.meta.status,200,'删除属性或者参数')
         if(resmsg==='err') return 
         this.getParamsData()
         this.deleteDialogVisible=false
        },
        // 展开行
       async handleTagClose(row,index){
           row.attr_vals.splice(index,1)
            let attr_vals = row.attr_vals.join(',')
            const{data:res} = await this.$http.put('categories/'+this.cateId+'/attributes/'+row.attr_id,{
                    'attr_name':row.attr_name,
                    'attr_sel':row.attr_sel,
                    'attr_vals':attr_vals,
                })   
            const resmsg = judgeMessage(res.meta.status,200,'更新参数值')
            if(resmsg==='err') return 


        },
        showInput(row){
            row.tagInputVisible=true
                this.$nextTick(() => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
        },

       async handleInputConfirm(row){
            if(row.tagInputValue.trim().length===0){
                row.tagInputValue=''
                row.tagInputVisible=false
                return
            }
            row.attr_vals.push(row.tagInputValue.trim())
        let attr_vals = row.attr_vals.join(',')
     
          const{data:res} = await this.$http.put('categories/'+this.cateId+'/attributes/'+row.attr_id,{
                'attr_name':row.attr_name,
                'attr_sel':row.attr_sel,
                'attr_vals':attr_vals,
            })
   
            const resmsg = judgeMessage(res.meta.status,200,'更新参数值')
            if(resmsg==='err') return 
            row.tagInputValue=''
            row.tagInputVisible=false
        }


    },

}
</script>



<style scoped>
.goodsCateList {
  display: flex;
  align-items: center;
  margin-top: 20px;
  font-size: 14px;
}
.el-tabs {
  margin-top: 20px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 20px;
}

.input-new-tag {
  max-width: 120px;
  width: 130px;
  margin-left: 10px;
}
</style>